{*
SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "/base" }}
{{ import "./components/common" }}

{{- block title() -}}
  {{- if isset(.Item) -}}
    {{ .Item.Title }}
  {{- else -}}
    Shared link
  {{- end -}}
{{- end -}}

{{- block body() -}}
  <div class="px-4">
    {{- if !isset(.Item) -}}
      <div class="max-w-3xl mx-auto my-8">
        <h1 class="text-3xl text-center">
          {{- if .Status == 404 -}}
            Page not found
          {{- else if .Status == 410 -}}
            Page has expired
          {{- end -}}
        </h1>
      </div>
    {{- else -}}
      <div class="max-w-3xl mx-auto my-8">
        <h1 class="my-4 font-lora text-3xl max-sm:text-2xl"
        dir="{{ default(.Item.TextDirection, "ltr") }}">{{ .Item.Title }}</h1>

        <ul class="mb-4">
          <li class="flex items-center gap-1 mb-2">
          {{- if isset(.Item.Resources.icon) -}}
            <img class="inline w-5 h-auto"
            alt="" src="{{ .Item.Resources.icon.Src }}"
            width="{{ .Item.Resources.icon.Width }}"
            height="{{ .Item.Resources.icon.Height }}">
          {{- end -}}
          <strong class="overflow-hidden text-ellipsis" title="{{ default(.Item.SiteName, "no site name") }}"
          dir="{{ default(.Item.TextDirection, "ltr") }}">{{ default(.Item.SiteName, "no site name") }}</strong>
          </li>
          {{- if !empty(.Item.Published) -}}
            {{- yield line_icon(icon="o-calendar") content -}}
              Published on {{ date(.Item.Published, "02 January 2006") }}
            {{- end -}}
          {{- end -}}
          {{- if !empty(.Item.Authors) -}}
            {{- yield line_icon(icon="o-pen") content -}}
              By {{ join(.Item.Authors, ", ") }}
            {{- end -}}
          {{- end -}}
          {{- yield line_icon(icon="o-link") content -}}
            <a href="{{ .Item.URL }}" class="link" target="top">{{ .Item.Domain }}</a>
          {{- end -}}
          {{- if .Item.ReadingTime() > 0 -}}
            {{- yield line_icon(icon="o-clock") content -}}
              {{ .Item.ReadingTime() }}&nbsp;min
            {{- end -}}
          {{- end -}}
        </ul>

        <p class="my-4 text-right">Shared by {{ .Username }} with
          <a class="link" href="https://readeck.org/">Readeck {{ yield icon(name="o-logo-square") }}</a>
        </p>

        <hr>

        {{- if !empty(.Item.Description) -}}
          <p class="my-4 text-lg leading-tight text-justify font-lora italic"
              dir="{{ default(.Item.TextDirection, "ltr") }}">{{ .Item.Description }}</p>
        {{- end -}}
      </div>

      {{- if .Item.Type == "photo" && isset(.Item.Resources.image) -}}
        <figure class="mb-8 max-w-5xl mx-auto">
          <img alt="" src="{{ .Item.Resources.image.Src }}"
          class="mx-auto rounded"
          width="{{ .Item.Resources.image.Width }}" height="{{ .Item.Resources.image.Height }}">
        </figure>
      {{- else if .Item.Type == "video" && isset(.Item.Resources.image) && .Item.Embed -}}
        <div class="max-w-4xl mx-auto">
          <div class="video-player mb-8" data-controller="video">
            <img alt="" src="{{ .Item.Resources.image.Src }}"
            width="{{ .Item.Resources.image.Width }}" height="{{ .Item.Resources.image.Height }}">
            <template data-video-target="embed">
              {{- raw(.Item.Embed) -}}
            </template>
            <template data-video-target="play">
              <button class="play-button" data-action="click->video#play">
                <span></span>
              </button>
            </template>
          </div>
        </div>
      {{- end -}}

      {{- if .Item.HasArticle -}}
        <main class="max-w-3xl mx-auto mt-16 prose font-lora text-lg leading-normal overflow-x-auto"
        dir="{{ default(.Item.TextDirection, "ltr") }}">
          {{- unsafeWrite(.HTML) -}}
        </main>
      {{- end -}}

      <div class="max-w-3xl mx-auto mt-4 mb-8 flex gap-2 items-center">
        <p class="flex-grow"><a class="link break-all" href="{{ .Item.URL }}">{{ .Item.URL }}</a></p>
        <img src="{{ qrcode(.Item.URL, -2, `#1e485b`) }}" alt="" class="rounded">
      </div>
    {{- end -}}

    <p class="max-w-3xl mx-auto my-8 pt-4 border-t text-right">
      Powered by <a class="link" href="https://readeck.org/">Readeck {{ yield icon(name="o-logo-square") }}</a>
    </p>
  </div>
{{- end -}}
